import React, { useEffect, useRef, useState } from 'react';
import { StepsForm, ProFormText,ProFormCheckbox, ProFormDateRangePicker, ProFormCaptcha, ProFormUploadButton,ProCard } from '@ant-design/pro-components';
import BaseTextInput from '@/components/Likk/CreateProFormText'
import { register,getCaptchaMobile } from '@/services/system/register';
import { Button ,Form,message,Checkbox, Row} from 'antd';
import TheUpload from '@/components/Upload';
import {  addTenant ,registerTenant } from '@/services/system/tenant';

import { Link } from 'react-router-dom';


const RegisterForm = () => {

  const xieyi = `
  
  
网络交易平台商家入驻协议
  
  甲方：（网络交易平台经营者）                                                                    
  乙方：（网上店铺经营者）                            
  
  根据《中华人民共和国民法典》及有关法律法规的规定，结合网络交易平台经营服务的特点，甲、乙双方在遵循自愿、平等、公平、诚实信用原则的基础上，经协商一致，签订本协议。
  第一条  释义
  本协议所称的网络交易平台，是指由依法注册登记的网络运营交易平台。
  本协议所称的入驻，是指由乙方提供甲方要求的申请材料，包括但不限于商家资质、证明材料等，经甲方审核通过后获得入驻网络交易平台开设网上店铺的权利。
  本协议所称的网上店铺，是指通过网络交易平台入驻后，能够让用户浏览、购买、支付并完成交易的店铺。
  本协议所称的顾客，是指在网络交易平台注册并在网络交易平台购买商家销售的商品或提供服务的消费者。
  本协议所称的商家，是指通过网上店铺向顾客提供商品或服务的法人、其他经济组织或者自然人。
  第二条  服务内容及要求
  甲方提供        网络交易平台，乙方向甲方提供真实有效的商家资质及相关证明材料，经甲方审核同意后入驻，并在甲方提供的网络交易平台上向顾客销售商品或者提供服务。
  甲方为乙方提供网络交易平台，包括审核通过后，在网络交易平台中为乙方提供独立的入驻网上店铺，及在后台为乙方提供支持其进行商品销售、促销、结算、配送等操作的软件系统。
  甲方为乙方提供增值服务 
  □ 商品仓储服务                                    
  □ 商品配送服务                                    
  □ 网络营销服务                                    
  □ 网上店铺运营培训                                
  □ 网上店铺装修服务                                
  □ 短信提醒服务                                    
  □ 资质审核服务                                    
  □ 其他增值服务                                    。
  乙方可根据自身情况选择甲方提供的增值服务，具体服务内容由双方另行签订补充协议约定。
  第三条  协议成立和生效
  本协议须同时满足下列条件后成立并生效：
  1．乙方入驻申请已经甲方审核通过，且乙方所提供的所有资料均属真实、完整、有效；
  2．乙方已于网络服务平台中点击确认并接受本协议全部内容；
  3．乙方通过其银行账户向甲方银行账户全额支付保证金且经甲方认可；
  4．甲方以书面形式（包括但不限于电子邮件形式）通知乙方本协议成立。
  第四条  协议期限与终止
  本协议期限自商家申请入驻起至商家退出入驻止。
  如果双方续签新的网络交易平台商家入驻协议，则本协议自新的协议生效之前一日自动失效；
  如发生以下情形，甲方有权解除本协议：
  1.乙方严重违反国家法律法规或网络服务平台规定；
  2.乙方严重侵犯他人合法权益；
  3.其他双方协商一致认为需终止合作的情况。
  第五条  服务费用
  增值服务费                                        。
  如甲方调整服务费标准的，应在新标准适用前1个月通知乙方。
  第六条  支付方式
  乙方应于每年度开始前付清当年度基础服务费用，先付后用。
  乙方应于每月/每季度结束7天前与甲方结算当月/当季度总成交额对应销售服务费，并于双方确认后7天内付清。
  乙方应向甲方指定账户付款                           
  如乙方未能按期付清当年度服务费/销售服务费的，甲方给予15天宽限期；如乙方未能在宽限期内付清的，甲方有权从保证金中抵扣，如仍未能获得清偿的，甲方有权要求乙方支付滞纳金并暂停乙方网上店铺运营或平台服务使用权，直至乙方付清为止。
  第七条  保证金
  为保障消费者权益，乙方需在本协议签订时缴付商议数额的保证金。如遇消费者投诉的，或符合下述条件之一的，甲方可先行赔付，协议终止时，甲方需在清偿如下赔付款后将保证金余额返还乙方： 
  1．商品或服务出现质量问题； 
  2．商品或服务与宣传不符； 
  3．出售假冒伪劣商品等其他侵犯消费者权益的行为； 
  4．乙方迟延支付服务费；
  5. 乙方有其他违约行为的。
  保证金赔付顺序：其他费用、主张权利费用、损害赔偿、滞纳金、违约金、服务费。
  如保证金按本条约定赔付的，甲方有权要求乙方限期补足。如乙方未能按期补足保证金的，甲方有权解除本协议，追究乙方违约责任、暂停乙方网上店铺运营或平台服务使用权。
  第八条  双方权利和义务
  1．甲方有义务维护网络交易平台的正常运行，保障交易数据的安全、可靠，按约定的服务内容及标准向乙方提供服务。
  2．甲方有权查阅或审查乙方的注册资料、信息发布及商品或服务交易行为；乙方应当确保所提供的资料真实有效，有义务对提供的所有资料及时予以更新。
  3．乙方如违反法律法规规定或违反本协议约定发布违规、侵权信息的，甲方有权删除乙方发布的信息，且事先无需经乙方同意。乙方应提供准确、完整的商品信息，确保商品描述真实准确，不得故意误导或欺骗消费者。
  4．乙方保证其具有签订和履行本协议的资格和能力，具备在甲方网络交易平台商销售商品或提供服务的经营主体资格，在交易过程中遵守诚实信用的原则，不得销售违禁品或侵犯他人合法权益的商品。
  5．乙方应根据甲方要求，向其提供合法有效证明文件，证明其在甲方网络交易平台销售的商品属合法经营：
  （1）主体资格证书：包括工商营业执照、税务登记证（国税、地税）、组织机构代码证等；
  （2）授权书：包括但不限于商标授权、品牌授权、专利授权等；
  （3）特定行业资质：乙方经营的商品根据国家法律、法规等规定需要具备的行业资质证书。
  6．乙方应对其注册资料、信息发布及商品或服务交易行为的真实性、准确性、合法性负责，不得侵害第三方的合法权利。
  7．乙方完成注册流程后将获得甲方提供的用户名和密码。乙方应妥善保管其用户名及密码信息，不得以任何形式擅自转让或授权他人使用自己的用户名，并对利用该用户名和密码所进行的活动负责。
  8．乙方负责店铺的日常经营管理，包括但不限于商品上架、订单管理、售后服务等。
  9．乙方保证其将按照有关规定出售商品并提供售后服务，乙方对其出售的商品或服务的质量承担保证责任，不得违反国家相关法律法规等强制性规定，并提供发票或相关的销售凭证，保证其遵守甲方的售后服务规定。如因乙方商品质量问题导致甲方承担责任的，甲方有权向乙方追偿。
  10．甲乙双方同意，网上店铺销售收款均应通过第三方支付公司（如中金/拉卡拉等，具体由甲方通知确定）统一收款至各店铺账户虚拟监管账户，待顾客确认收货无误后，按T+1方式提现至乙方指定账户（乙方应对指定账户信息真实性自担责任）。如乙方同意开设信用卡支付的，顾客使用信用卡支付后产生的分期付款费用应由乙方承担。
  第九条  保密条款
  甲乙双方都有保密义务，未经对方书面同意，任何一方不得披露、使用或允许他人使用其所掌握的对方的商业秘密、技术信息。
  本协议终止后，保密条款仍然有效，双方仍应继续履行保密义务。
  第十条  违约责任
  1．乙方逾期支付服务费用超过宽限期的，自乙方开始逾期之日起（包括宽限期），每逾期一天应向甲方支付    元滞纳金，逾期超过    天的，甲方有权解除本协议。
  2．乙方对其出售的商品或服务的质量承担保证责任，不得销售假冒伪劣产品，给甲方造成损失的，应予以赔偿。
  3.乙方如发生违背本协议项下条款的情形，甲方有权没收保证金、解除本协议、终止乙方网上店铺运营或平台服务使用权，并要求乙方支付违约金人民币      元。如对甲方造成损失的，甲方有权追偿，包括但不限于直接损失、诉讼费、律师费、财产保全担保费等。
  第十一条  适用法律和争议解决方式
  本协议适用中华人民共和国法律。双方在签署、履行本协议过程中发生争议的，可协商解决，或向有关部门申请调解。如协商解决不成，可向甲方所在地有管辖权的人民法院提起诉讼。
  第十二条  附则
  本协议项下所有的费用和金额均以人民币计算。就本协议项下合作事宜，甲乙双方应根据国家法律法规政策的规定各自向税务机关缴纳税款。
  本协议的附件与本协议正文具有同等法律效力
  
  `;
  const [form] = Form.useForm();
  const formMapRef = useRef<React.MutableRefObject<any>[]>([]);
  const [captchaLoading, setCaptchaLoading] = useState(false); // Add captcha loading state

  useEffect(() => {
    // 在这里可以进行一些初始化操作
  }, []);
  const handleAdd = async (fields: API.System.Tenant) => {
    const hide = message.loading('正在添加');
    try {
      const resp = await registerTenant({ ...fields });
      hide();

      if (resp.code === 200) {
        message.success('添加成功');
        form.resetFields();

      } else {
        message.error(resp.msg);
      }
      return true;
    } catch (error) {
      hide();
      message.error('添加失败请重试！');
      return false;
    }
  };


  const handleFinish = async (values: any) => {
    // alert("注册资料接口")
    // 在这里处理表单提交
    console.log(values);
    // values.imageUrl = imageUrl;
    // values.imageUrl2 = imageUrl2;
    // values.imageUrl3 = imageUrl3;
    var reqbody = {
      ...values,
      licenseUrl:values.licenseUrl?.[0]?.url,
      legalFrontIdCardUrl:values.legalFrontIdCardUrl?.[0]?.url,
      legalReverseIdCardUrl:values.qualityImage?.[0]?.url,
    }
    console.log(reqbody);
    console.log(values);
    console.log(values.legalFrontIdCardUrl?.[0]?.url);

    handleAdd(reqbody);

    // try {
    // const response = await register({  reqbody });
    // if (response.code === 200) {
    //     message.success("资料提交成功，请等待审核");
    // }else{
    //     // message.error("资料提交失败");
    // }
    // } catch (error) {
    //     console.log(error);
    //     message.error("提交失败");
    // }

  };

  const handleGetCaptcha = async (mobile: string) => {
    alert("获取验证码接口")
    // alert(JSON.stringify(formMapRef.current[0].getFieldsValue()))
    if (captchaLoading) {
        return; // Prevent multiple clicks
      }
    // try {
        const mobile2 = formMapRef.current[0].current.getFieldValue('mobile');
        setCaptchaLoading(true); // Set captcha loading state to true

      const response = await getCaptchaMobile({"mobile":mobile2})
      setCaptchaLoading(false); // Set captcha loading state to false after request completes

      if (response.ok) {
        // 在这里处理获取验证码成功的逻辑
        alert('验证码已发送');
      } else {
        // 在这里处理获取验证码失败的逻辑
        alert('获取验证码失败');
        throw("失败 停止计时")
      }
       
    // } catch (error) {
    //   // 在这里处理网络请求错误的逻辑
    //   console.error(error);
    // } finally {
    //   }

  };

  

  return (
    <>
      <ProCard title="入驻信息" headerBordered bodyStyle={{ paddingBottom: 0 }}    style={{ paddingBottom:100 }}
      extra={  
        <>已有账号？<Link to="/user/login">登陆</Link> </>  }>
             
    <StepsForm  submitter={{
          render: (props) => {
            if (props.step === 0) {
              return (
                <Button type="primary" onClick={() => props.onSubmit?.()}>
                同意 《入驻协议》 
                </Button>
              );
            }
            if (props.step === 1) {
              return [
                <Button key="pre" onClick={() => props.onPre?.()}>
                  返回入驻协议
                </Button>,
                <Button
                  type="primary"
                  key="goToTree"
                  onClick={() => props.onSubmit?.()}
                >
                提交
                </Button>,
              ];
            }
          }
        }}
      formMapRef={formMapRef}
      onFinish={handleFinish}
    >

      <StepsForm.StepForm name="step0" title="入驻协议"
      >
         <div style={{ maxWidth: "800px", width: "85vw", "word-wrap": "break-word","white-space" : "pre-wrap"}}>  
      <pre style={{ width: "105%",wordWrap: "break-word", overflow: "break-word" ,"white-space" : "pre-wrap"}}>  
        {xieyi}  
      </pre>  
    </div>  
  {/* <div style={{maxWidth:"80vw",width:"80vw"}} dangerouslySetInnerHTML={{__html:`<pre style="width:100%">  ${xieyi}</pre>`}}></div> */}
<pre>
     
 
 </pre>
      {/* <ProFormCheckBox required={true} >同意《入驻协议》</ProFormCheckBox> */}

      {/* <ProFormCheckbox.Group
              name="checkbox"
              label="入驻协议"
              width="lg"
              required={true} 
              options={['同意《入驻协议》']}
            /> */}
        <Row>
        
        {/* <Form.Item name="agreeProtocol" required={true} label={<><Checkbox />  <div style={{width:"10px"}}></div> 同意《入驻协议》 </>} onChange={()=>{}}>  
      </Form.Item>  */}
        </Row>
   
      </StepsForm.StepForm>

      <StepsForm.StepForm name="step1" title="基本信息">
        {/* <ProFormText
          label="手机号"
          name="mobile"
          rules={[
            { required: true, message: '请输入手机号' },
            { pattern: /^1\d{10}$/, message: '手机号格式错误' },
          ]}
        />
        <ProFormCaptcha
          label="验证码"
          name="captcha"
          rules={[
            { required: true, message: '请输入验证码' },
          ]}
          onGetCaptcha={handleGetCaptcha}
          captchaProps={{ loading: captchaLoading }} // Pass captcha loading state to ProFormCaptcha

        />
        <ProFormText
    label="用户名"
    name="username"
    rules={[
      { required: true, message: '请输入用户名' },
    ]}
  />

  <ProFormText.Password
    label="密码"
    name="password"
    rules={[
      { required: true, message: '请输入密码' },
    ]}
  /> */}

     
        <BaseTextInput name="id" label="商户编码" required={true} />
        <BaseTextInput name="tenantName" label="商户名称" required={true} />
        <BaseTextInput name="userName" label="登陆账号" required={true} />
        <BaseTextInput name="userPhone" label="手机号码" required={true} />
        <BaseTextInput name="userEmail" label="邮箱地址" required={true} />

      {/* </StepsForm.StepForm>

      <StepsForm.StepForm name="step2" title="认证信息"> */}
      <div className="labTitle">企业信息（必填项） </div>
      <BaseTextInput name="tenantAddr" label="企业地址" required />
      <BaseTextInput name="legalName" label="法人姓名" required />
      <BaseTextInput name="contactName" label="联系人姓名" required />

      
      <BaseTextInput name="contactEmail" label="联系人邮箱" required />
      <BaseTextInput name="tenantLicenseNo" label="营业执照号" required />

      <Form.Item
          name="licenseUrl"
              label="营业执照"
          // rules={[{ required: true }]}
          extra="图片支持PNG、JPG、JPEG格式，大小不超过5MB"
        >
          <TheUpload
            listType="picture-card"
            maxCount={1}
            limitSize={5}
            // multiple={true}
            accept=".png, .jpg, .jpeg"
          />
      </Form.Item>

      <Form.Item
          name="legalFrontIdCardUrl"
          label="法人身份证正面"
          // rules={[{ required: true }]}
          extra="图片支持PNG、JPG、JPEG格式，大小不超过5MB"
        >
          <TheUpload
            listType="picture-card"
            maxCount={1}
            limitSize={5}
            accept=".png, .jpg, .jpeg"
          />
        </Form.Item>

        <Form.Item
          name="legalReverseIdCardUrl"
          label="法人身份证反面"
          // rules={[{ required: true }]}
          extra="图片支持PNG、JPG、JPEG格式，大小不超过5MB"
        >
          <TheUpload
            listType="picture-card"
            maxCount={1}
            limitSize={5}
            accept=".png, .jpg, .jpeg"
          />
        </Form.Item>


      {/* <BaseTextInput name="businessName" label="企业全称" required /> */}

        

        {/* <BaseTextInput name="legalEmail" label="邮箱" required /> */}

     
        
        {/* <BaseTextInput name="phone" label="联系人手机(+86)" required /> */}
        {/* <BaseTextInput name="checkCode" label="验证码" required /> */}

        <div class="labTitle">银行信息（选填项） </div>
        <BaseTextInput name="bankCard" label="请填写公司对公账号"  />
        <BaseTextInput name="bankName" label="开户银行"  />
        <BaseTextInput name="bankBranchName" label="开户支行"  />


      </StepsForm.StepForm>

      {/* 可以添加更多的步骤表单 */}
      
    </StepsForm>
    


    </ProCard>

    </>
  );
};

export default RegisterForm;